<!-- 祭品购买特效 -->
<template>
	<u-overlay :show="show">
		<!-- <view class="candle" @click="show = false">
			<view>感谢点亮</view>
			<image :src="pics[0]" mode=""></image>
		</view> -->
		<view class="goods" v-if="goods">
			<view class="picGrid">
				<image
					v-for="(item, index) in pics"
					:src="item.offeringsImageUrl || item.imageUrl"
					mode=""
				></image>
			</view>
		</view>
	</u-overlay>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watch } from 'vue';
const show = ref(false);
const goods = ref(true);
const props = defineProps({
	pics: Array
});

watch(show, (newVal) => {
	if (show.value) {
		setTimeout(() => {
			show.value = false;
		}, 2000);
	}
});

defineExpose({
	show
});
</script>

<style lang="scss" scoped>
.candle {
	background-color: rgba(0, 0, 0, 0.6);
	height: 100vh;
	border: 1px solid;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: 999999;
	top: 0;

	view {
		text-align: center;
		color: rgba(255, 232, 58, 1);
		font-size: 36rpx;
		margin-bottom: 64rpx;
		-webkit-animation: puff-in-center 2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
		animation: puff-in-center 2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
	}

	image {
		-webkit-animation: puff-in-center 2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
		animation: puff-in-center 2s cubic-bezier(0.47, 0, 0.745, 0.715) both;
		width: 296rpx;
		height: 660rpx;
	}

	@-webkit-keyframes puff-in-center {
		0% {
			-webkit-transform: scale(2);
			transform: scale(2);
			-webkit-filter: blur(4px);
			filter: blur(4px);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			-webkit-filter: blur(0);
			filter: blur(0);
			opacity: 1;
		}
	}

	@keyframes puff-in-center {
		0% {
			-webkit-transform: scale(2);
			transform: scale(2);
			-webkit-filter: blur(4px);
			filter: blur(4px);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			-webkit-filter: blur(0);
			filter: blur(0);
			opacity: 1;
		}
	}
}

.goods {
	background-color: rgba(0, 0, 0, 0.6);
	height: 100vh;
	border: 1px solid;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 999999;
	top: 0;

	.picGrid {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 800rpx;
	}

	image {
		-webkit-animation: slide-out-blurred-top 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) both;
		animation: slide-out-blurred-top 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) both;
		width: 200rpx;
		height: 200rpx;
	}

	@-webkit-keyframes slide-out-blurred-top {
		0% {
			-webkit-transform: translateY(0) scaleY(1) scaleX(1);
			transform: translateY(0) scaleY(1) scaleX(1);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-filter: blur(0);
			filter: blur(0);
			opacity: 1;
		}

		100% {
			-webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
			transform: translateY(-1000px) scaleY(2) scaleX(0.2);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-filter: blur(40px);
			filter: blur(40px);
			opacity: 0;
		}
	}

	@keyframes slide-out-blurred-top {
		0% {
			-webkit-transform: translateY(0) scaleY(1) scaleX(1);
			transform: translateY(0) scaleY(1) scaleX(1);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-filter: blur(0);
			filter: blur(0);
			opacity: 1;
		}

		100% {
			-webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
			transform: translateY(-1000px) scaleY(2) scaleX(0.2);
			-webkit-transform-origin: 50% 0%;
			transform-origin: 50% 0%;
			-webkit-filter: blur(40px);
			filter: blur(40px);
			opacity: 0;
		}
	}
}
</style>
